<template>
  <div class="page">
    <div class="hei20"></div>
    <div class="customsWrapper">
      <div class="customsContainer">
        <div class="customsMain">
            <mt-cell title="事件编号">
              <span style="color:#ff0000">[{{detail.serialNumber}}]</span>
            </mt-cell>
            <mt-cell title="事件来源">
              <span>{{detail.eventSource}}</span>
            </mt-cell>
            <mt-cell title="事件描述">
              <span>{{detail.description}}</span>
            </mt-cell>
            <mt-cell title="上报人">
              <span>{{detail.gridName}}</span>
            </mt-cell>
            <mt-cell title="联系方式">
              <span>{{detail.reporterContact}}</span>
            </mt-cell>
            <mt-cell title="上报时间">
              <span>{{reportDate}}</span>
            </mt-cell>
            <mt-cell title="事件分类">
              <span>{{detail.eventCategory}}</span>
            </mt-cell>
            <mt-cell title="发生地址">
              <span>{{detail.happenAddress}}</span>
            </mt-cell>
            <mt-cell title="图片">
              <span v-if="detail.photos&&detail.photos.length > 0">
                <i v-for='(img,index) in detail.photos' :key='index'><img class="upSrc" :src="baseUrl +'/image/'+ img" /></i>
              </span>
              <span style="color:rgb(17, 193, 243)" v-else>
                  暂无图片
                </span>
            </mt-cell>
            <mt-cell title="音频">
                <span v-if="detail.record">
                  <i @click="handlePlay('audio')"><img :src="require('@/assets/images/vioceBtn.png')" /> </i>
                  <audio class="audio" ref="audio">
                    <source :src="baseUrl +'/file/'+ detail.record + '?token=' + token" type="audio/mpeg">
                    您的浏览器不支持 audio 元素。
                  </audio>
                </span>
                <span style="color:rgb(17, 193, 243)" v-else>
                  暂无音频
                </span>
              </mt-cell>
            <p class="unitTitle center">办理记录</p>
            <div class="processingRecords" v-for='(item,index) in processingRecords' :key='index'>
              <mt-cell title="处理任务">
                <span style="color:#ff0000">{{item.taskName}}</span>
              </mt-cell>
              <mt-cell title="开始时间">
                <span>{{item.startTime | time}}</span>
              </mt-cell>
              <mt-cell title="结束时间">
                <span>{{item.endTime | time}}</span>
              </mt-cell>
              <mt-cell title="处理人">
                <span>{{item.assigneeName}}</span>
              </mt-cell>
              <!-- <mt-cell title="下一环节">
                <span>{{detail.happenAddress}}</span>
              </mt-cell> -->
              <mt-cell title="办理意见">
                <span style="color:green">
                  <p v-for='(li,index) in item.comments' :key='index'>{{index+1}}、{{li}}</p>
                </span>
              </mt-cell>
              <mt-cell title="图片">
                <span v-if="item.photo.length > 0">
                  <i v-for='(img,index) in item.photo' :key='index'><img class="upSrc" :src="baseUrl +'image'+ img" /></i>
                </span>
                <span style="color:rgb(17, 193, 243)" v-else>
                  暂无图片
                </span>
              </mt-cell>
              <mt-cell title="音频">
               <span v-if="item.record">
                  <i @click="handlePlay('otherAudio')"><img :src="require('@/assets/images/vioceBtn.png')" /> </i>
                  <audio class="audio" ref="otherAudio">
                    <source :src="baseUrl +'/file/'+ item.record + '?token=' + token" type="audio/mpeg">
                    您的浏览器不支持 audio 元素。
                  </audio>
                </span>
                <span style="color:rgb(17, 193, 243)" v-else>
                  暂无音频
                </span>
              </mt-cell>
            </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Cell } from 'mint-ui'
import Lib from '@/assets/js/Lib'
Vue.component(Cell.name, Cell)
import { findEventDetail, getHistoricEvent, findGridTree } from '@/assets/js/ApiUtil'
import { setTimes } from '@/assets/js/Utils'
import { getLabelById } from '@/assets/js/Utils'
import  * as token from '@/assets/js/RequestUtil'
import App from '@/assets/js/conf'
export default {
  name: 'customsDetail',
  data () {
    return {
      title: '事件详情',
      detail: {},
      processingRecords: [],
      playFlag: false,
      baseUrl: App.baseUrl,
      token: token.token
    }
  },
  components: {
    Cell
  },
  mounted () {
    // let id = this.$route.query.id  
    let id = this.getQueryVariable('id')
    let procesInsId = this.getQueryVariable('procsInsId')
    // let procesInsId = this.$route.query.procesInsId
    this.findEventData(id)
    this.getHistorictData(procesInsId)
  },
  methods: {
    getQueryVariable (variable) {
      var query = window.location.search.substring(1);
      console.log(query)
      var vars = query.split("&");
      for (var i = 0; i < vars.length ; i++) {
          var pair = vars[i].split("=");
          if(pair[0] === variable){
            return pair[1]
          }
      }
    },
    findEventData (id) {
      findEventDetail(id).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          this.detail = data
          this.getOptions(data.gridId)
        }
      })
    },
    getHistorictData (id) {
      getHistoricEvent(id).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          this.processingRecords = data.historicTaskVo
          for (let i = 0; i < this.processingRecords.length; i++) {
            this.processingRecords[i].photo = this.toArray(this.processingRecords[i].photo)
            // this.processingRecords[i].record = this.toArray(this.processingRecords[i].record)
          }
        }
      })
    },
    getOptions (value) {
      findGridTree().then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (data && data instanceof Array) {
            if (data[0].children) {
              let newData = JSON.parse(JSON.stringify(data[0].children))
              this.selectData = { data1: newData }
              this.$set(this.detail, 'gridName', getLabelById(value, this.selectData) + '--' + this.detail.reporterName)
              return false
            }
          }
        }
      })
    },
    toArray (string) {
      if (string) {
        return string.split(',')
      } else {
        return []
      }
    },
    handlePlay (key) {
      if (!this.playFlag) {
        this.playFlag = true
        this.$refs[key].play()
      } else {
        this.playFlag = false
        this.$refs[key].pause()
      }
    },
  },
  computed: {
    reportDate () {
      if (this.detail.reportDate) {
        return setTimes(this.detail.reportDate)
      } else {
        return ''
      }
    }
  },
  filters: {
    time (timer) {
      let setDb = function (num) {
      // 补零操作
        if (num < 10) {
          return '0' + num
        } else {
          return '' + num
        }
      }
      var time = new Date(timer)
      var year = time.getFullYear() // 年
      var mon = setDb(time.getMonth() + 1) // 0
      var day = setDb(time.getDate()) // 24
      var hour = setDb(time.getHours()) // 时
      var min = setDb(time.getMinutes()) // 分
      var sec = setDb(time.getSeconds()) // 秒
      return year + '-' + mon + '-' + day + ' ' + hour + ':' + min + ':' + sec
    }
  }
}
</script>
<style scoped>
.page {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  overflow: auto;
}
.customsWrapper {
  padding:0 10px
}
.customsTitle {
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: bold;
  color: #333;
  text-align: center
}
.mint-cell >>> .mint-cell-title {
  flex: 0 0 100px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 160%;
  }
.mint-cell span {
  padding:  10px 0;
  line-height: 160%;
}
.upSrc {
  width: 100px;
  height: 100px;
}
.unitTitle {
  border-bottom: 2px solid #26a2ff;
  margin: 10px 0;
  padding: 10px 0;
}
.processingRecords {
  margin-bottom: 10px;
  /* -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); */
}
.audio {
  width: 100px;
  height: 80px
}
.sound {
  position: relative;
  display: inline-block
}
</style>
